<template>
  <div class="list_container flex both-100">
    <Breadcrumb :title="pageTitle" />
    <div class="content_container">
      <!-- 搜索模块 -->
      <!-- <el-form ref="searchMap" :inline="true" :model="searchMap" class="serach_wrapper flex-space-between">
        <div class="search">
          <el-form-item prop="name">
            <el-input v-model="searchMap.name" placeholder="请输入关键字" size="small"></el-input>
          </el-form-item>
          <el-form-item class="flex">
            <el-button @click="handleSearch()" class="btn_primary">查询</el-button>
            <el-button @click="handleReset()" class="btn_cancel">重置</el-button>
          </el-form-item>
        </div>
        <div class="edit">
          <el-form-item class="flex">
            <el-button @click="handleAdd()" class="btn_primary" icon="el-icon-plus"> 新增 </el-button>
          </el-form-item>
        </div>
      </el-form> -->
      <!-- 搜索模块over -->

      <!-- 表格模块 -->
      <div class="table_container" ref="table">
        <el-table :data="regionList" stripe style="width: 100%" row-key="regionId" :load="loadChildren" lazy :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
          <el-table-column prop="name" label="名称"> </el-table-column>
          <!-- <el-table-column prop="name" label="区域" align="center"> </el-table-column>
          <el-table-column prop="operation" label="操作" align="center" fixed="right">
            <template slot-scope="scope">
              <span style="margin-left: 10px" type="text" class="tag_primary" size="small" @click="handleEdit(scope.row, 'edit')">编辑</span>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <!-- 表格模块over -->
    </div>

    <!-- <div class="dialog_content">
      <el-dialog class="m_dialog" title="新增" :visible.sync="dialogVisible" width="800" append-to-body>
        <div class="content">
          <custom-form ref="add" :formModel="formModel" :formItemConfig="formItemConfig" :formRules="formRules" label-width="80px" label-position="left" />
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" class="btn_cancel">取 消</el-button>
          <el-button type="primary" @click="submitFrom('add')" class="btn_primary">确 定</el-button>
        </div>
      </el-dialog>
    </div> -->
  </div>
</template>

<script>
import { listRegion } from '@/api';
export default {
  name: 'region',
  data() {
    return {
      // 搜索条件
      searchMap: {
        name: '',
        pid: 0,
      },
      // 数据列表
      regionList: [],
      height: 0,
      // 弹窗显示隐藏
      dialogVisible: false,
      // 提交表单数据
      formModel: {
        name: '',
        area: '',
      },
      // 表单配置项
      formItemConfig: [
        {
          label: '名称',
          prop: 'name',
          span: 12,
          clearable: true,
          width: '100%',
          placeholder: '请输入区域名称',
        },
        {
          label: '区域',
          prop: 'area',
          span: 12,
          clearable: true,
          width: '100%',
          placeholder: '请输入区域地址',
        },
      ],
      // 表单验证
      formRules: {
        name: {
          required: true,
          message: '区域名称不能为空',
          trigger: 'blur',
        },
        area: {
          required: true,
          message: '区域地址不能为空',
          trigger: 'blur',
        },
      },
    };
  },
  created() {
    this.getList();
    this.$nextTick(() => {
      // this.height = this.$utils.winHeight - this.$refs.table.offsetTop - 20;
    });
  },
  mounted: function () {},
  components: {},
  computed: {
    pageTitle() {
      return '行政区管理';
    },
  },
  methods: {
    getList() {
      this.loading = false;
      listRegion(this.searchMap).then(res => {
        let data = res.data;
        if (200 === res.code) {
          this.regionList = res.data.map((item, index) => {
            if (item.leaf == '0') {
              item.hasChildren = true;
            }
            return item;
          });
        }
      });
    },
    // 新增
    handleAdd() {
      this.resetForm();
      this.dialogVisible = true;
    },
    // 修改数据
    handleEdit(row) {
      this.dialogVisible = true;
      this.formModel = row;
    },
    submitFrom(form) {
      this.$refs[form].validate(valid => {
        console.log(this.formModel);
        if (valid) {
          this.dialogVisible = false;
        }
      });
    },
    // 清空表单数据
    resetForm() {
      this.formModel = {
        userId: undefined,
        deptId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        email: undefined,
        sex: undefined,
        status: '0',
        remark: undefined,
        postIds: [],
        roleIds: [],
      };
    },
    // 加载子节点
    loadChildren(row, treeNode, resolve) {
      console.log(row, treeNode, resolve);
      this.searchMap.pid = row.regionId;
      listRegion(this.searchMap).then(res => {
        if (200 === res.code) {
          resolve(
            res.data.map((item, index) => {
              if (item.leaf == '0') {
                item.hasChildren = true;
              }
              return item;
            })
          );
        } else {
        }
      });
    },
  },
};
</script>

<style lang="less" scoped></style>
